<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont">
        &#xe672;
      </span>
    </div>
    <div class="header-search">
      <span class="iconfont">
        &#xe630;
      </span>
      输入景点/城市/游玩主题
    </div>
    <div class="header-right">
      <router-link to="/City">
        {{city}}
        <span class="iconfont">
        &#xe656;
        </span>
      </router-link>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "headers",
  computed:{
    ...mapState(['city'])
  }
}
</script>

<style scoped >
 .header{
   width: 100%;
   line-height: .88rem;
   background: #00bcd4;
   color: #fff;
   font-size: .35rem;
   display: flex;
 }
 .header-left{
   width: .4rem;
   padding: 0 .2rem;
   text-align: center;
   font-weight: bold;
 }
 .header-search{
   flex: 1;
   background: #fff;
   height: .7rem;
   margin: .10rem 0;
   border-radius: .1rem;
   color: #e4e7ea;
   line-height: .7rem;
   font-size: .28rem;
   padding-left: .2rem;
 }
 .header-right{
   font-size: .28rem;
   padding: 0 .2rem;
 }
 .header-right a{
   color: #fff;
 }
</style>
